﻿<extend name="Base/common"/>
<block name="style">
	<style type="text/css">
	#studentbook{
		width: 100%;
		height: 400px;
	}
	#studentscore{
		width: 100%;
		height: 500px;
	}
	</style>
</block>
<block name="body">
    <div class="col-md-10">
       <div class="row ml-30 ">
       <h3 class="game-title"><span class="bt-3 pt-10">{$bookgamename}</span></h3>
       		<div id="studentbook"></div>
       		<div id="studentscore"></div>
       </div>
    </div>   
</block>

<block name="script">
	<script type="text/javascript" src="__STATIC__/echarts.min.js"></script>
	<script type="text/javascript">
	

     //导航高亮
    highlight_subnav("{:U('Analysis/index')}");

		$(function(){
			// 基于准备好的dom，初始化echarts实例
        var bookChart  = echarts.init(document.getElementById('studentbook'));
		var scoreChart = echarts.init(document.getElementById('studentscore'));
        // 指定图表的配置项和数据
        var option = {
        	title:{
        		text: "{$student.username}图书状态饼状图",
        		x:'center'
        	},
        	tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} 本 ({d}%)"
		    },
        	legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: [<foreach name="readtimes" item="vo" ><if condition="$vo.isready eq 0">'已读',<elseif condition="$vo.isready eq 2" />'在读',<else/>'未读',</if></foreach>]
		    },
            series : [
		        {
		            name: '图书状态',
		            type: 'pie',
		            radius: '55%',
		            
		            data:[<foreach name="readtimes" item="vo" >
			            {value:'{$vo.cnt}',name:<if condition="$vo.isready eq 0">'已读'<elseif condition="$vo.isready eq 2" />'在读'<else/>'未读'</if>},</foreach>
			        ],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
            }
		        }
		    ]
        };

        // 使用刚指定的配置项和数据显示图表。
        bookChart.setOption(option);

        var scoreOption = {
			    title: {
			        text: '班级前10积分排行',
			        x   : 'center',

			    },
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
			    legend: {
			        data: ['积分'],
			        left:'left'
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'value',
			        boundaryGap: [0, 0.01]
			    },
			    yAxis: {
			        type: 'category',
			        data: [
			        <foreach name="score" item="vo" >
			        	'{$vo.username}',
			        </foreach>
			        ]
			    },
			    series: [
			        {
			            name: '积分',
			            type: 'bar',
			            data: [
			            <foreach name="score" item="vo" >
			        		{$vo.integral},
			        	</foreach>
			            ]
			        },
			       
			    ]
			};
		scoreChart.setOption(scoreOption);
		})
	</script>
</block>